<template>
    <div class="inputItem">
        <div class="leftText">{{textname}}</div>
        <div class="rightText">
            <input class="inputstyle" :type="inputtype" :placeholder="placeholder" @input="inputchanged($event)" />
        </div>
    </div>
</template>

<script>
export default {
    name: "InputItem",
    props: ["textname", "placeholder", "inputtype"],
    data() {
        return {};
    },
    mounted() {},
    methods: {
        // 监听输入框事件
        inputchanged: function($event) {
            console.log("this.$parent.mercode:"+this.$parent.mercode)
            console.log("$event"+$event);
            // this.$parent.mercode=444;
            this.$emit("inputchanged", $event); // 将值放在自定义的事件函数中作为参数
        },
    },
    computed: {}
};
</script>


<style scoped>
input:focus {
    outline: none;
    border: 1px solid #fff;
}

.inputItem {
    width: 100%;
    height: 60px;
    font-size: 18px;
    text-indent: 10px;
    letter-spacing: 10px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-bottom: 1px solid #eceef1;
}

.leftText {
    width: 30%;
    padding-left: 1%;
    color: #757575;
    overflow: hidden;
    white-space: nowrap;
}

.rightText {
    width: 100%;
}

.inputstyle {
    width: 100%;
    font-size: 18px;
    border: none;
    outline: none;
    color: #757575;
}
</style>